<template>
    <!-- <tm-app class="app">
        <view class="header">
            <image src="../../static/firends/right.png" class="right" @click="goback"></image>
            <text class="firend">投诉</text>
            <view class="shuoming"></view>
        </view>
        <view class="info">
            <view class="zong-ping">
                <view class="title-header">
                    投诉目标
                    <view class="back-info"></view>
                </view>
                <view class="input-title">
                    <view class="quanzi">{{ targetName }}:</view>
                    <input class="title" type="text" placeholder="群名称八个汉字" :disabled="true" v-model="plaint.groupName">
                </view>
            </view>
            <view class="info-tousu">
                <view class="title-header">
                    投诉原因
                    <view class="back-info"></view>
                </view>
                <view class="tousu-list">
                    <view class="tousu-title" v-for="(item, index) in reasonId" @click="onGetSelectInfo(index)"
                        :class="item.type === true ? 'activeclass' : ''">
                        {{ item.text }}
                    </view>
                </view>
                <textarea class="info-textarea" placeholder="请输入投诉内容" v-model="detail"></textarea>
            </view>
            <view class="info-jietu">
                <view class="title-header">
                    投诉原因
                    <view class="back-info"></view>
                </view>
                <view class="images-list">
                    <view class="image-info" v-for="(item, index) in state.imgurlist">
                        <image :src="item" class="touxiang"></image>
                        <view class="shanchu">
                            <image src="../../static/rate/shanchu.png" class="" @click="deleteImg(index)"></image>
                        </view>
                    </view>
                    <view class="btns" @click="choseImage" v-if="state.imgurlist.length < 6">
                        <image src="../../static/rate/paizhao.png" class="paizhao"></image>
                    </view>
                </view>
            </view>
        </view>
        <view class="btn" @click="onuserComplaint">发布</view>
    </tm-app> -->
    <tm-app class="createCircle">
        <view
            style="width:750rpx;background: #fff"
            :style="{ height: systemInfo.statusBarHeight + 'px' }"
        ></view>

        <view class="content" :style="{ top: systemInfo.statusBarHeight + 'px' }">
            <tm-navbar style="background-color: #fff" :height="50" :margin="[0, 0]" :padding="[0, 0]" :isPlace="false"
                :fontSize="32" :title="titleText" :transprent="true">
            </tm-navbar>

            <scroll-view class="scr" :scroll-y="true">

                <view class="info">
                    <view class="zong-ping">
                        <view class="title-header">
                            <text class="text psr" style="z-index:10">投诉目标</text>
                            <view class="back-info"></view>
                        </view>
                        <view class="input-title">
                            <view class="quanzi">{{ targetName }}：</view>
                            <input class="title" type="text" placeholder="群名称八个汉字" :disabled="true"
                                v-model="plaint.groupName">
                        </view>
                    </view>
                    <view class="info-jietu" style="margin-top:20rpx;">
                        <view class="images-list">
                            <view class="image-info" v-for="(item, index) in trendDetail.imgs">
                                <image :id="`touxiang1${index}`" :src="item" class="touxiang" @tap="previewImage('touxiang1',index,trendDetail.imgs)" mode="aspectFill"></image>
                            </view>
                        </view>
                    </view>


                    <view class="info-tousu">
                        <view class="title-header">
                            <text class="text psr" style="z-index:10">投诉原因</text>
                            <view class="back-info"></view>
                        </view>
                        <view class="tousu-list">
                            <view class="tousu-title" v-for="(item, index) in reasonId" @click="onGetSelectInfo(index)"
                                :class="item.type === true ? 'activeclass' : ''">
                                {{ item.text }}
                            </view>
                        </view>
                        <textarea class="info-textarea" maxlength="500" placeholder="请输入投诉内容" v-model="detail"></textarea>
                    </view>
                    <view class="info-jietu">
                        <view class="title-header">
                            <text class="text psr" style="z-index:10">证据截图</text>
                            <view class="back-info"></view>
                        </view>
                        <view class="images-list">
                            <view class="image-info" v-for="(item, index) in state.imgurlist">
                                <image :id="`touxiang${index}`" :src="item" class="touxiang" @tap="previewImage('touxiang',index,state.imgurlist)" mode="aspectFill"></image>
                                <view class="shanchu d-flex a-center j-center">
                                    <image @tap="deleteImg(index)" class="image-del-icon" src="@/static/image/upload-image-del.png"></image>
                                </view>
                            </view>
                            <view class="btns d-flex d-c a-center j-center" @click="choseImage" v-if="state.imgurlist.length < 6">
                                <image src="../../static/rate/paizhao.png" class="paizhao"></image>
                                <text style="font-size:24rpx;color:#ccc;margin-top:10rpx;">添加图片</text>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>


        <view class="btn_bottom_box">
            <view class="btn_main_r" @tap="onuserComplaint">
                <text class="text">提交</text>
            </view>
            <view class="bottom_seat"></view>
        </view>

        <imagePreview ref="preview"></imagePreview>
    </tm-app>
</template>
<script setup lang="ts">
import { ref, reactive, computed, onMounted, handleError } from "vue";
import { onReady, onShow, onLoad, onReachBottom, onPageScroll } from "@dcloudio/uni-app";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { userComplaint,getTrendDetail } from "@/api/api";
import dayjs from "@/tmui/tool/dayjs";
import { BASE_URL } from "@/api/request";
import { userData as userDataStore } from "@/store/userData";
import {showLoading,closeLoading,wait} from '@/utils/utils'
import imagePreview from "@/components/imagePreview.vue";
import { getHDImages } from '@/utils/format';
import { chooseImage } from "@/utils/utils";


const trendDetail = ref({})

const GetTrendDetail = async (id) => {
    const params = { fcmid:id };
    const res = await getTrendDetail(params);
    res.data.imgs = res.data.picture.split(",").filter((img) => img);

    console.log('GetTrendDetail');
    console.log(res.data);
    plaint.value.groupName = res.data.content


    trendDetail.value = res.data;
};


const preview = ref();
const previewImage = (idPre:string,index:number,urls:any) => {
	uni.createSelectorQuery().selectAll(`#${idPre}${index}`).boundingClientRect().exec((ret)=>{
	   let params = {
        idPre,
	   	startInfo:ret[0],//图片的初始大小与位置
	   	index:index,//当前图片地址
	   	urls:getHDImages(urls)//预览集合图片地址
	   }
	   preview.value.open(params);
	});
}



const systemInfo: any = systemInfoStore();
const userData: any = userDataStore();
const titleText: any = ref("投诉");
const btnList: any = ref([{
    text: ""
}]);
const state: any = reactive({
    imgurlist: []
});
const targetName = computed(() => {

    console.log('targetName')
    console.log('targetName')
    console.log('targetName')
    console.log(plaint.value)
    if (plaint.value.target === "userFriendCircle") {
        return "动态"
    }
    if (plaint.value.target === "userPlan") {
        return "方案"
    }

    if (plaint.value.target === "group") {
        return "群"
    } else {
        return "用户昵称"
    }
})
const activeClass: any = ref("");
const reasonId: any = ref([{
    text: "虚假信息",
    type: false
},
{
    text: "欺诈",
    type: false
}, {
    text: "色情",
    type: false
}, {
    text: "线下交易",
    type: false
}, {
    text: "诱导付费",
    type: false
}, {
    text: "其他",
    type: false
}]);
const plaint: any = ref(null);
const detail: any = ref("");
const onGetSelectInfo = (index: number) => {

    reasonId.value.forEach(item=>{
        item.type=false;
    })

    reasonId.value[index].type = true;
    // if (reasonId.value[item].type === true) {
    //     reasonId.value[item].type = false;
    //     return;
    // }
    // reasonId.value[item].type = true;
};
onLoad((options) => {
    console.log(options)
    if(options.trendId){
        GetTrendDetail(options.trendId)
    }

    plaint.value = options;

    if(options.target==='userPlan'){
        plaint.value.groupName = options.name;
    }
})
//提交投诉
const onuserComplaint = async () => {
    const targetId: any = plaint.value.groupId||plaint.value.trendId||plaint.value.targetId;
    const target = plaint.value.target;
    const reason: any = [];
    const text = detail.value;
    for (let i in reasonId.value) {
        if (reasonId.value[i].type === true) {
            reason.push(reasonId.value[i].text);
        }
    }

    if(!reason.length){
        uni.showToast({
            icon: "none",
            title: "请选择投诉原因",
            duration: 1500,
        });
        return
    }

    if(!text){
        uni.showToast({
            icon: "none",
            title: "请输入投诉内容",
            duration: 1500,
        });
        return
    }

    if(!state.imgurlist.length){
        uni.showToast({
            icon: "none",
            title: "请上传证据截图",
            duration: 1500,
        });
        return
    }

    const parmas: any = {
        target,
        targetId,
        reason: reason ? reason.join() : "",
        detail: text,
        imgUrl: state.imgurlist ? state.imgurlist.join() : "",
        userId: userData.id

    };
    const result = await userComplaint(parmas);
    const { flag, data } = result;
    console.log(flag, data);
    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: '投诉失败',
            duration: 1500,
        });
        return;
    }
    uni.showToast({
        icon: "none",
        title: "投诉成功",
        duration: 1500,
    });
    setTimeout(() => {
        uni.navigateBack();
    }, 1500);
}
// 上传图片
const choseImage = () => {
    chooseImage({
        success: (chooseImageRes) => {
            const token = uni.getStorageSync("api_token");
            const tempFilePaths = chooseImageRes.tempFilePaths;
            console.log("chooseImageRes");
            console.log(chooseImageRes);
            showLoading();
            uni.uploadFile({
                header: {
                    token,
                },
                url: `${BASE_URL}/file/upload`, //仅为示例，非真实的接口地址
                filePath: tempFilePaths[0],
                name: "file",
                formData: {
                    'isCompress':1,
                },
                success: (uploadFileRes) => {
                    let res: any;
                     closeLoading();
                    try {
                        res = JSON.parse(uploadFileRes.data);
                    } catch (error) {
                        uni.showToast({
                            icon: "none",
                            title: '请稍后再试',
                            duration: 1500,
                        });
                        return;
                    }


                    const { flag, data } = res;

                    console.log(flag);

                    if (flag !== 1) {
                        uni.showToast({
                            icon: "none",
                            title: '上传失败,请稍后再试',
                            duration: 1500,
                        });
                        return;
                    }

                    const { fileUrl } = data;
                    console.log(fileUrl);
                    state.imgurlist.push(fileUrl);

                },
                fail() {
                    closeLoading();
                    uni.showToast({
                        icon: "none",
                        title: '上传失败,请稍后再试',
                        duration: 1500,
                    });
                },
            });
        },
    });
}
// 删除图片
const deleteImg = (item: any) => {
    state.imgurlist.splice(item, 1);
};
const goback = () => {
    uni.navigateBack();
}
</script>
<style lang="scss" scoped>
.createCircle {
    position: relative;
    width: 750rpx;
    height: 100%;

    .btn_main {
        position: fixed;
        display: block;
        height: 80rpx;
        border-radius: 40rpx;
        line-height: 80rpx;
        bottom: calc(constant(safe-area-inset-bottom));
        bottom: calc(env(safe-area-inset-bottom));
        z-index: 100;

    }

    .ask {
        width: 32rpx;
        height: 32rpx;
        margin-left: 5rpx;
    }

    .content {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: #f5f5f5;
    }

    .scr {
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        bottom: calc(constant(safe-area-inset-bottom) + 120rpx);
        bottom: calc(env(safe-area-inset-bottom) + 120rpx);

        .info {
            width: 710rpx;
            margin: 20rpx auto;
            border-radius: 20rpx;
            overflow: hidden;
            margin-bottom: 0;
            background-color: #FFFFFF;
            padding-bottom: 20rpx;

            .zong-ping {
                width: 100%;
                background: #FFFFFF;

                .title-header {
                    font-size: 34rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 600;
                    color: #333333;
                    padding: 20rpx 0 22rpx 30rpx;
                    box-sizing: border-box;
                    position: relative;

                    .back-info {
                        width: 138rpx;
                        height: 26rpx;
                        background: linear-gradient(270deg, rgba(73, 243, 210, 0) 0%, #23E2A6 100%);
                        border-radius: 13rpx;
                        position: absolute;
                        left: 32rpx;
                        bottom: 25rpx;
                    }

                }

                .input-title {
                    width: 670rpx;
                    height: 80rpx;
                    background: #F5F5F5;
                    border-radius: 10rpx;
                    margin: 0 auto;
                    display: flex;
                    align-items: center;
                    padding: 0 20rpx;
                    box-sizing: border-box;

                    .quanzi {
                        font-size: 30rpx;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 600;
                        color: #333333;

                    }

                    .title {
                        flex: 1;

                    }
                }


            }

            .info-tousu {
                width: 100%;
                background: #FFFFFF;
                margin-top: 16rpx;

                .title-header {
                    font-size: 34rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 600;
                    color: #333333;
                    padding: 20rpx 0 22rpx 30rpx;
                    box-sizing: border-box;
                    position: relative;

                    .back-info {
                        width: 138rpx;
                        height: 26rpx;
                        background: linear-gradient(270deg, rgba(73, 243, 210, 0) 0%, #23E2A6 100%);
                        border-radius: 13rpx;
                        position: absolute;
                        left: 32rpx;
                        bottom: 25rpx;
                    }

                }

                .tousu-list {
                    width: 100%;
                    height: 200rpx;
                    display: flex;
                    flex-wrap: wrap;
                    padding: 0 30rpx;
                    justify-content: space-around;

                    .tousu-title {
                        width: 200rpx;
                        height: 60rpx;
                        border-radius: 30rpx;
                        border: 1rpx solid #CCCCCC;
                        font-size: 28rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        text-align: center;
                        line-height: 60rpx;
                    }

                    .activeclass {
                        background-color: #23E2A6;
                        font-weight: 600;
                        color: #FFFFFF;
                        border: none;
                    }
                }

                .info-textarea {
                    width: 670rpx;
                    height: 220rpx;
                    background: #F5F5F5;
                    border-radius: 10rpx;
                    margin: 0 auto;
                    padding: 20rpx;
                }

            }

            .info-jietu {
                .title-header {
                    font-size: 34rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 600;
                    color: #333333;
                    padding: 20rpx 0 22rpx 30rpx;
                    box-sizing: border-box;
                    position: relative;

                    .back-info {
                        width: 138rpx;
                        height: 26rpx;
                        background: linear-gradient(270deg, rgba(73, 243, 210, 0) 0%, #23E2A6 100%);
                        border-radius: 13rpx;
                        position: absolute;
                        left: 32rpx;
                        bottom: 25rpx;
                    }

                }

                .images-list {
                    display: grid;
                    grid-template-columns: repeat(3, 210rpx);
                    grid-gap: 20rpx 20rpx;
                    width: 710rpx;
                    justify-content: center;

                    .btns {
                        width: 210rpx;
                        height: 210rpx;
                        border-radius: 4rpx;
                        border: 2rpx dashed #CCCCCC;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        .paizhao {
                            width: 50rpx;
                            height: 50rpx;
                            border: 2rpx dashed #CCCCCC;

                        }
                    }

                    .image-info {
                        width: 210rpx;
                        height: 210rpx;
                        border-radius: 20rpx;
                        position: relative;

                        .touxiang {
                            width: 100%;
                            height: 100%;
                            border-radius: 20rpx;
                        }

                        .shanchu {
                            position: absolute;
                            width: 40rpx;
                            height: 40rpx;
                            right: 10rpx;
                            bottom: 10rpx;
                            background: rgba(0,0,0,0.5);
                            border-radius: 50%;
                            .image-del-icon{
                                width: 32rpx;
                                height: 32rpx;
                            }
                        }

                    }
                }


            }
        }
    }













}
</style>